<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="aui-operation">
  <lv-group [lvGutter]="groupCommon.middleRowGutter">
    <button lv-button lvType="primary" (click)="register()" auiRolePermission
      [rolePermission]="roleOperationMap.manageResource" lv-popover [lvPopoverClosable]="true"
      lvPopoverContent="{{'protection_guide_database_tip_label' | i18n}}" lvPopoverPosition="bottom"
      lvPopoverClassName="customer-guide-tip-bk" lvPopoverTrigger="customize" [(lvPopoverVisible)]="registerTipShow"
      [lvPopoverBeforeClose]="lvPopoverBeforeClose">
      {{'common_register_label' | i18n}}
    </button>
    <button lv-button (click)="protect(selection, protectResourceAction.Create)"
      [disabled]="protectBtnDisabled || !selection.length" pmpermission pmOperation='ProtectDatabases'>
      {{'common_protect_label' | i18n}}
    </button>
    <button lv-button lv-dropdown [lvDropdownMenus]="moreMenus" *ngIf="moreMenus | find: 'hidden': false">
      <span>{{'common_more_label' | i18n}}</span>
      <i #lvDropdownTrigger lv-icon="lv-icon-triangle-down"></i>
    </button>
  </lv-group>
  <lv-group [lvGutter]="groupCommon.middleRowGutter">
    <lv-search [lvFocus]="true" [(ngModel)]="queryName" (lvSearch)="searchByName($event)"
      lvPlaceHolder="{{'common_search_type_label'|i18n:['common_database_label'|i18n]}}">
    </lv-search>
    <button class="aui-button-icon" lv-button lvSize="auto" (click)="refresh()">
      <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
    </button>
  </lv-group>
</div>
<div class="list-container">
  <lv-datatable [lvData]="tableData" [lvPaginator]="page" lvSelectionMode='multiple' [lvSelection]='selection'
    (lvSelectionChange)="selectionChange($event)" lvCompareWith="uuid" #lvTable lvAsync lvResize lvResizeMode="expand"
    [lvScroll]="{ x: '100%' }">
    <thead>
      <tr>
        <th lvShowCheckbox width="40px" [lvRowsData]="lvTable.renderData"></th>
        <ng-container *ngFor="let col of columns">
          <th *ngIf="col.isShow" [lvShowFilter]="col.filter" (lvFilterChange)="filterChange($event)"
            [(lvFilters)]="col.filterMap" lvCellKey="{{ col.key }}" lvShowCustom lvFilterCheckAll>
            <div lv-overflow>
              {{ col.label}}
              <div lvCustom *ngIf="col.key === 'sla_compliance'" class="resource-sla-help">
                <aui-sla-compliance-tooltip margin="true"></aui-sla-compliance-tooltip>
              </div>
            </div>
            <div lvCustom *ngIf="col.key === 'uuid'">
              <aui-custom-table-search (search)="searchByUuid($event)"
                [filterTitle]="col.label"></aui-custom-table-search>
            </div>
            <div lvCustom *ngIf="col.key === 'name'">
              <aui-custom-table-search (search)="searchByName($event)"
                [filterTitle]="col.label"></aui-custom-table-search>
            </div>
            <div lvCustom *ngIf="col.key === 'path'">
              <aui-custom-table-search (search)="searchByIp($event)"
                [filterTitle]="col.label"></aui-custom-table-search>
            </div>
            <div lvCustom *ngIf="col.key === 'sla_name'">
              <aui-custom-table-search (search)="searchBySlaName($event)"
                [filterTitle]="col.label"></aui-custom-table-search>
            </div>
            <div lvCustom *ngIf="col.key === 'version'">
              <aui-custom-table-search (search)="searchByVersion($event)"
                [filterTitle]="col.label"></aui-custom-table-search>
            </div>
            <div lvCustom *ngIf="col.key === 'labelList'">
              <aui-custom-table-search (search)="searchByLabel($event)"
                [filterTitle]="col.label"></aui-custom-table-search>
            </div>
          </th>
        </ng-container>
        <th width='144px' lvShowCustom>
          {{'common_operation_label'|i18n }}
          <div lvCustom>
            <i lv-icon='lv-icon-col-setting' #colPopover='lvPopover' lv-popover lvPopoverPosition='bottomRight'
              [lvPopoverContent]='colSelectTp' lvPopoverTheme='light' lvPopoverTrigger='click'
              style="cursor: pointer;"></i>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTable.renderData;trackBy:trackByUuid">
        <tr [ngClass]="{ 'lv-table-row-highlight': isActive(item) }">
          <td lvShowCheckbox width="40px" [lvRowData]='item'>
          </td>
          <ng-container *ngFor="let col of columns">
            <ng-container *ngIf="col.isShow">
              <td>
                <ng-container [ngSwitch]="col.key">
                  <ng-container *ngSwitchCase="'name'">
                    <lv-group lvGutter='8px'>
                      <div lv-overflow>
                        <span class="aui-link" id='outerClosable' (click)="getDetail(item)">
                          {{ item.name }}
                        </span>
                      </div>
                      <span class="guide-recommend-label" *ngIf="showGuideNew(item)">
                        {{'protection_guide_new_resource_label' | i18n}}
                      </span>
                    </lv-group>
                  </ng-container>
                  <ng-container *ngSwitchCase="'link_status'">
                    <aui-status [value]="item.link_status" type="resource_LinkStatus_Special"></aui-status>
                  </ng-container>
                  <ng-container *ngSwitchCase="'inst_name'">
                    <span lv-overflow>{{item.extendInfo?.inst_name | nil}}</span>
                  </ng-container>
                  <ng-container *ngSwitchCase="'verify_status'">
                    <aui-status [value]="item.verify_status" type="Verify_Status"></aui-status>
                  </ng-container>
                  <ng-container *ngSwitchCase="'subType'">
                    <span lv-overflow>{{item.subType | textMap:'oracleType'}}</span>
                  </ng-container>
                  <ng-container *ngSwitchCase="'osType'">
                    <span lv-overflow>{{ item.environment?.osType | textMap: 'Os_Type' | nil}}</span>
                  </ng-container>
                  <ng-container *ngSwitchCase="'sla_name'">
                    <ng-container *ngIf="item.sla_id; else emptyTpl">
                      <span class="aui-link" lv-overflow id='outerClosable' (click)="getSlaDetail(item)" lv-overflow>
                        <sla-type [name]="item.sla_name"></sla-type>
                      </span>
                    </ng-container>
                  </ng-container>
                  <ng-container *ngSwitchCase="'sla_status'">
                    <aui-status [value]="item.sla_status" type="Sla_Status"></aui-status>
                  </ng-container>
                  <ng-container *ngSwitchCase="'protection_status'">
                    <aui-status [value]="item.protection_status" type="Protection_Status"></aui-status>
                  </ng-container>
                  <ng-container *ngSwitchCase="'sla_compliance'">
                    <aui-status [value]="item.sla_compliance" type="Sla_Compliance"></aui-status>
                  </ng-container>
                  <ng-container *ngSwitchCase="'labelList'">
                    <ng-container *ngIf="item?.labelList?.length; else emptyTpl">
                      <lv-tag [ngModel]="item?.showLabelList" [lv-tooltip]="TagTpl"></lv-tag>
                      <ng-template #TagTpl>
                        <lv-tag [ngModel]="item?.hoverLabelList"></lv-tag>
                      </ng-template>
                    </ng-container>
                  </ng-container>
                  <ng-container *ngSwitchDefault>
                    <span lv-overflow>
                      {{item[col.key] | nil}}
                    </span>
                  </ng-container>
                </ng-container>
              </td>
            </ng-container>
          </ng-container>
          <td width='144px'>
            <lv-operation-menu [lvItemsFn]="optsCallback" [lvData]="item"></lv-operation-menu>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>
</div>
<div class="aui-paginator-wrap">
  <lv-paginator #page [lvPageSizeOptions]="sizeOptions" [lvPageSize]="pageSize" [lvTotal]="total" [lvPageIndex]="pageNo"
    (lvPageChange)="pageChange($event)" [hidden]="!total">
  </lv-paginator>
</div>

<ng-template #emptyTpl>
  --
</ng-template>

<ng-template #colSelectTp>
  <column-filter-tpl [tableKey]="tableColumnKey" [columns]="columns"></column-filter-tpl>
</ng-template>